<template>
  <iframe
 src="https://udify.app/chatbot/R8ThFgwDGCWGzh8U"
 style="width: 100%; height: 100%; min-height: 700px"
 frameborder="0"
 allow="microphone">
</iframe>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { sendMessage, getHistory } from '@/api/chat'

export interface Message {
  id: string;
  content: string;
  role: 'user' | 'ai';
  timestamp: Date;
  status: 'pending' | 'success' | 'error';
  type?: 'text' | 'image' | 'emoji';
  imageUrl?: string;
}

const userAvatar = '/gril.jpg'
const aiAvatar = 'https://api.dicebear.com/7.x/miniavs/svg?seed=ai'

const messages = reactive<Message[]>([])
const input = ref('')
const sending = ref(false)
const scrollbarRef = ref()
const inputRef = ref()

function formatTime(date: Date) {
  const d = new Date(date)
  return d.toLocaleTimeString()
}

async function loadHistory() {
  const res = await getHistory()
  messages.splice(0, messages.length, ...res.data.map((m: any) => ({ ...m, timestamp: new Date(m.timestamp) })))
  await nextTick(() => scrollbarRef.value?.setScrollTop(99999))
}

async function onSend() {
  if (!input.value.trim()) return
  const msg: Message = {
    id: Date.now() + Math.random() + '',
    content: input.value,
    role: 'user',
    timestamp: new Date(),
    status: 'pending',
    type: 'text',
  }
  messages.push(msg)
  input.value = ''
  sending.value = true
  await nextTick(() => {
    scrollbarRef.value?.setScrollTop(99999)
    inputRef.value?.focus()
  })
  try {
    const res = await sendMessage(msg.content)
    messages.push({
      id: Date.now() + Math.random() + '',
      content: res.data.reply,
      role: 'ai',
      timestamp: new Date(),
      status: 'success',
      type: 'text',
    })
    msg.status = 'success'
  } catch (e) {
    msg.status = 'error'
    ElMessage.error('消息发送失败')
  } finally {
    sending.value = false
    await nextTick(() => {
      scrollbarRef.value?.setScrollTop(99999)
      inputRef.value?.focus()
    })
  }
}

function onClear() {
  messages.splice(0, messages.length)
}

onMounted(loadHistory)
</script>

<style scoped>
.chat-window {
  background: url('/OIP-C.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  padding: 16px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.chat-history {
  flex: 1;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 12px; 
  background: url('/OIP-C.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
/* 可选：加一层半透明遮罩，提升可读性 */
.chat-history::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.45); /* 可调整透明度 */
  pointer-events: none;
  z-index: 1;
}
.chat-bubble {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  position: relative;
  z-index: 2; /* 保证气泡在遮罩之上 */
}
.chat-bubble.user {
  flex-direction: row-reverse;
}
.chat-bubble.ai {
  flex-direction: row;
}
.bubble-content {
  max-width: 60%;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 0 8px;
  word-break: break-all;
  position: relative;
  opacity: 0.95; /* 保证内容清晰 */
}
.chat-bubble.user .bubble-content {
  background: #e6f7ec;
}
.chat-bubble.ai .bubble-content {
  background: #f4f4f4;
}
.chat-img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 6px;
}
.msg-meta {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.msg-status.error {
  color: #f56c6c;
}
.msg-status.success {
  color: #67c23a;
}
.chat-input-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.chat-input {
  flex: 1;
}
</style> 